<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box {
				width: 300px;
				height: 500px;
				border: 5px solid darkorange;
				text-align: center;
				
				/* 
				step2:绑定动画
				animation:动画名称  持续的时间  次数  速度 延迟 ;
				 infinite----无限次
				*/
				animation: change 10s 3 linear .5s;
				      /* 名字  时间 次数  速度  延迟*/
			}

			/* 
			动画:
			step1:创建关键帧 
				@keyframes  动画名称{
						from{ 开始帧  }
						to{	 结束帧 }
			}
			step2:绑定动画
				animation
				from：开始帧 to:结束帧
				百分比 ：时间节点
			*/
			@keyframes change {
				0%,15%{
					width: 300px;
					height: 500px;
					border:5px solid rebeccapurple;
				}
				20% ,40%{ /* 某种状态持续一段时间 */
					/* 时间节点     用总的时长*时间节点 */
					background-color: red;
					transform: rotate(0);
				}

				40%,65% {
					/* 第4秒的状态 */
					width: 800px;
					transform: rotate(180deg);
					background-color: gainsboro;
				}

				60% ,75% {
					width: 1200px;
					height: 200px;
					background-color: beige;
				}

				100% {
					width: 300px;
					height: 300px;
					background-color: blue;
					transform: rotate(360deg);
				}
			}

			/* @-webkit-keyframes{
				内核
			}
			@-ms-viewport{
				多适配 可以在其他的浏览器打开
			} */
		</style>
	</head>
	<body>
		<div class="box"> 盒子</div>
	</body>
</html>